.h5-editor-component__group {
  @apply w-full mb-6;
  .h5-editor-component__button {
    @apply flex flex-col gap-y-1 text-center items-center justify-center;
    color: var(--editor-component-button-text);
    font-size: var(--editor-component-button-font-size);
    cursor: pointer;
    .component-button__content {
      @apply flex items-center justify-center overflow-hidden transition-all text-center mx-auto;
      padding: var(--editor-component-button-padding);
      width: var(--editor-component-button-size);
      height: var(--editor-component-button-size);
      background-color: var(--editor-component-button);
      border-radius: var(--editor-component-button-radius);
    }
    // &:hover .component-button__content,
    &.checked .component-button__content {
      color: var(--editor-component-button-text-checked);
      background: var(--editor-component-button-checked);
    }
    &.disabled {
      cursor: not-allowed;
      .component-button__content {
        opacity: 25%;
      }
      color: #88888a;
    }
  }
}
